<template>
  <div class="purchase">
    <div class="purchaseone">
      <van-icon name="arrow-left" style="font-size: 20px" @click="fun" />
      <div class="purchaseone1">
        <span>商品</span>
        <span>评价</span>
        <span>详情</span>
      </div>
    </div>
    <div class="purchasetwo">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" style="width: 100%; height: 375px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="purchasethree">
      <span>￥2850.00</span>
      <span>预估到手￥2707.50></span>
    </div>
    <div class="purchasefour">
      <div class="purchasefour1">
        <span>9.5折</span>
        <span>优惠></span>
      </div>
      <div class="purchasefour2">
        购买派发积分，不参与生日积分权益（2倍封顶）
      </div>
      <div class="purchasefour3">
        荣耀80 12GB＋256GB 碧波微蓝 双卡 全网通版 手机
      </div>
      <div class="purchasefour4">
        荣耀80 12GB＋256GB 碧波微蓝 双卡 全网通版 手机
      </div>
    </div>
    <div class="purchasefive">
      <div class="purchasefive1">
        <span>促销</span>
        <span>9.5折</span>
        <span>指定商品专享9.5折</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>积分</span>
        <!-- <span>9.5折</span> -->
        <span>赠送中免积分,可使用积分抵扣</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>说明</span>
        <!-- <span>9.5折</span> -->
        <span>支持7天无理由退货</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>限购</span>
        <!-- <span>9.5折</span> -->
        <span>商品限购2件</span>
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="zi">
      提货方式
    </div>
    <div class="purchasesix">
      <div class="purchasesix1">
        <span>1.离岛在家</span>
        <!-- <span>9.5折</span> -->
        <span>三亚</span>
        <!-- <span>机场离岛，最快六个小时</span> -->
      </div>
      <van-icon name="weapp-nav" />
    </div>
    <div class="purchaseseven">
      <span>精选评价（0）</span>
      <p>-本商品暂未收录记录-</p>
    </div>
    <div class="purchaseeight">
      <img src="https://pic.cdfgsanya.com/assets/upload/brandlogo/61cf7271c9fd82fa00e5b84d5ab7caee.jpg" alt="">
      <!-- <p>荣耀</p>
        <p>在售商品25件</p> -->
    </div>

    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  data() {
    return {
      images: [
        "https://pic.cdfgsanya.com/assets/upload/product/5ef32b336a3e5a7b23bcb06ff3ec7d1e_900x900.jpg",
        "https://pic.cdfgsanya.com/assets/upload/product/545c3acac000fcde15f986412fcfb3e7_900x900.jpg",
        "https://pic.cdfgsanya.com/assets/upload/product/9a263db7470a5e0d7b1185c032a342e7_900x900.jpg",
        "https://pic.cdfgsanya.com/assets/upload/product/a0d279939f80edcabfbd0a90c56918d8_900x900.jpg",
        "https://pic.cdfgsanya.com/assets/upload/product/a0d279939f80edcabfbd0a90c56918d8_900x900.jpg",
        "https://pic.cdfgsanya.com/assets/upload/product/640de2c2d6ef25574932c1328da20760_900x900.jpg",
      ],
    };
  },
  methods: {
    fun() {
      //方法1:
      this.$router.push("/Gcss");
    },
  },
};
</script>

<style scoped>
.purchase {
  background-color: beige;
  position: relative;
}

.purchaseone {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: white;
  align-items: center;
  position: fixed;
  z-index: 999;
}

.purchaseone1 {
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin-left: 20px;
  font-size: 14px;
}

.purchasetwo {
  margin-bottom: 15px;
}

.purchasethree {
  width: 350px;
  height: 70px;
  background-color: red;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  line-height: 60px;
}

.purchasethree>span:nth-child(1) {
  color: white;
  font-size: 20px;
  margin-left: 10px;
}

.purchasethree>span:nth-child(2) {
  font-size: 12px;
  width: 136px;
  background-color: white;
  height: 20px;
  border-radius: 5px 10px 10px 0;
  color: red;
  margin-left: 10px;
}

.purchasefour {
  width: 350px;
  height: 138px;
  background-color: white;
  margin: 0 auto;
  border-radius: 10px;
  position: absolute;
  top: 450px;
  left: 12.8px;
  padding: 15px;
  box-sizing: border-box;
}

.purchasefour1 {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.purchasefour1>span:nth-child(1) {
  color: red;
  background-color: pink;
  border-radius: 2px;
  width: 35px;
  text-align: center;
}

.purchasefour1>span:nth-child(2) {
  color: white;
  background-color: red;
  width: 40px;
  text-align: center;
  border-radius: 8px;
}

.purchasefour2 {
  font-size: 12px;
  background-color: pink;
  color: white;
  width: 280px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border-radius: 5px;
  margin-top: 10px;
}

.purchasefour4 {
  font-size: 12px;
  color: gray;
}

.purchasefive {
  width: 350px;
  height: 50px;
  background-color: white;
  margin-top: 135px;
  margin-left: 13px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
}

.purchasefive1 {
  font-size: 12px;
  width: 170px;
  display: flex;
  justify-content: space-between;
}

.purchasefive1>span:nth-child(1) {
  font-weight: 700;
}

.purchasefive1>span:nth-child(2) {
  color: red;
}

.purchasesix {
  width: 350px;
  height: 50px;
  background-color: white;
  margin-top: 10px;
  margin-left: 13px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
}

.purchasesix1 {
  font-size: 12px;
  width: 200px;
  display: flex;
  /* justify-content: space-between; */
}

.purchasesix1>span:nth-child(1) {
  font-weight: 700;
  margin-right: 10px;
}

.purchase>.zi {
  margin-left: 13px;
  margin-top: 10px;
  font-size: 14px;
}

.purchaseseven {
  width: 350px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
}

.purchaseseven>span {
  font-size: 14px;
}

.purchaseseven>p {
  font-size: 12px;
  color: gray;
  text-align: center;
}

.purchaseeight {
  width: 350px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
  /* display: flex; */
}

.purchaseeight>img {
  width: 30%;
}
</style>